<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head>
  <title>Title</title>
  <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
  <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
  <script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  <script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
  <script th:src="@{/static/kindeditor/kindeditor.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" placeholder="请输入" autocomplete="off"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-block">
      <select id="typeId" name="role" lay-filter="role">
        <option value="">请选择</option>
        <option value="1">超级管理员</option>
        <option value="2">普通管理员</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-block">
      <div class="layui-upload">
        <div class="layui-upload-list">
          <img width="150px" height="150px" class="layui-upload-img" id="demo1">
          <input type="hidden" name="image" id="imageId">
          <p id="demoText"></p>
        </div>
        <button type="button" class="layui-btn" id="uploadId">上传图片</button>
      </div>
    </div>
  </div>
  <div class="layui-inline">
    <input type="checkbox" name="gender" value="1"/>男
    <input type="checkbox" name="gender" value="2"/>女
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
  layui.use(['form', 'upload'], function () {
    var form = layui.form;
    var upload = layui.upload;

    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
      elem: '#uploadId'
      ,url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(result){
        if (result.code == 0) {
          $('#imageId').val(result.data);
          $('#demoText').html(''); //置空上传失败的状态
        } else {
          mylayer.errorMsg(result.msg);
        }
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });

    // 绑定提交事件
    form.on('submit(submit)', function (data) {
      var field = data.field; // 获取表单字段值
      console.log(data);
      // 此处可执行 Ajax 等操作
      $.post(
              '/user/add',
              field,  //{name: 'zhyangsan', address: 'fdfd', time: 'fd'}
              function (result) {
                console.log(result);
                if (result.code == 0) {
                  mylayer.okMsg(result.msg);
                  //layer.close(index);
                  //table.reload('tableId');
                  setInterval(function() {
                    //关闭弹出框
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    //刷新父页面
                    window.parent.location.reload();
                  }, 2000)
                } else {
                  mylayer.errorMsg(result.msg);
                }
              },
              'json'
      );
      return false; // 阻止默认 form 跳转
    });
  });
</script>
</body>
</html>